<template>
	<view class="commodity-list" :style="colorStyle">
		<view class="header bg-color">
			<view class="title">大宗商品</view>
		</view>
		<scroll-view scroll-y="true" class="scroll-container" 
			@scrolltolower="loadMore" 
			@refresherrefresh="onRefresh"
			:refresher-triggered="isRefreshing"
			refresher-enabled
			:refresher-threshold="100">
			<view class="list-container">
				<view class="commodity-item" v-for="(item, index) in commodityList" :key="index">
					<view class="item-header">
						<text class="publish-time">发布时间：{{item.add_time}}</text>
					</view>
					<view class="item-content">
						<view class="item-title">{{item.title}}</view>
						<view class="item-desc">{{item.content}}</view>
						<view class="item-location">
							<text class="location-icon iconfont icon-dingwei"></text>
							<text class="location-text">{{item.province}} {{item.city}} {{item.area}}</text>
						</view>
					</view>
					<view class="item-footer">
						<view class="contact-btn" @click="callService(item)">
							<text class="contact-icon iconfont icon-kefu"></text>
							<text class="contact-text">联系客服</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 加载更多 -->
			<view class="loading-more" v-if="commodityList.length > 0">
				<text class="loading iconfont icon-jiazai" v-if="loading"></text>{{loadTitle}}
			</view>
			
			<!-- 空状态 -->
			<view class="empty-container" v-if="commodityList.length === 0 && !loading">
				<image class="empty-image" src="/static/images/empty-box.png"></image>
				<text class="empty-text">暂无大宗商品信息</text>
			</view>
		</scroll-view>
		
		<!-- 悬浮添加按钮 -->
		<view class="float-add-btn bg-color" @click="goToPublish">
			<text class="add-icon">+</text>
		</view>
	</view>
</template>

<script>
	import { getCommodityList } from '@/api/commodity.js';
	import colors from '@/mixins/color.js';
	
	export default {
		mixins: [colors],
		data() {
			return {
				commodityList: [],
				commodityPhone: '',
				page: 1,
				limit: 10,
				loading: false,
				loadend: false,
				loadTitle: '加载更多',
				isRefreshing: false
			
			}
		},
		onLoad() {
			this.getCommodityList(true);
		},
		methods: {
			// 获取大宗商品列表
			getCommodityList(isPage) {
				if (this.loading || this.loadend) return;
				this.loading = true;
				this.loadTitle = '';
				
				if (isPage === true) {
					this.commodityList = [];
					this.page = 1;
				}
				
				getCommodityList({
					page: this.page,
					limit: this.limit
				}).then(res => {
					if (res.status === 200) {
						const list = res.data.list.list || [];
						this.commodityPhone = res.data.commodityPhone || '';
						
						// 合并数据
						this.commodityList = this.commodityList.concat(list);
						
						// 判断是否加载完毕
						this.loadend = list.length < this.limit;
						this.page++;
					} else {
						this.loadend = true;
					}
					
					this.loading = false;
					this.loadTitle = this.loadend ? '没有更多内容啦~' : '加载更多';
					this.isRefreshing = false;
				}).catch(err => {
					this.loading = false;
					this.loadTitle = '加载更多';
					this.isRefreshing = false;
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					});
				});
			},
			
			// 加载更多
			loadMore() {
				if (!this.loadend) {
					this.getCommodityList();
				}
			},
			
			// 下拉刷新
			onRefresh() {
				this.isRefreshing = true;
				this.loadend = false;
				this.getCommodityList(true);
			},
			
			// 跳转到发布页面
			goToPublish() {
				console.log('正在跳转到发布页面');
				// 使用绝对路径
				const url = '/pages/commodity/commodity_publish/index';
				console.log('跳转地址:', url);
				uni.navigateTo({
					url: url,
					fail: (err) => {
						console.error('跳转失败:', err);
						uni.showToast({
							title: '跳转失败，请重试',
							icon: 'none'
						});
					}
				});
			},
			
			// 拨打电话
			callService(item) {
				if (!this.commodityPhone) {
					uni.showToast({
						title: '暂无客服电话',
						icon: 'none'
					});
					return;
				}
				
				uni.makePhoneCall({
					phoneNumber: this.commodityPhone,
					success: () => {
						console.log('拨打电话成功');
					},
					
					fail: (err) => {
						console.log('拨打电话失败', err);
					}
				});
			}
		},
		// 页面上拉触底事件
		onReachBottom() {
			this.loadMore();
		},
		// 页面下拉刷新
		onPullDownRefresh() {
			this.loadend = false;
			this.getCommodityList(true);
			uni.stopPullDownRefresh();
		}
	}
</script>

<style lang="scss" scoped>
	.commodity-list {
		min-height: 100vh;
		background-color: #f5f5f5;
		
		.header {
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 10;
			
			.title {
				font-size: 32rpx;
				color: #fff;
				font-weight: bold;
			}
		}
		
		.scroll-container {
			margin-top: 88rpx;
			height: calc(100vh - 88rpx);
			box-sizing: border-box;
		}
		
		.list-container {
			padding: 20rpx;
		}
		
		.commodity-item {
			background-color: #fff;
			border-radius: 12rpx;
			margin-bottom: 20rpx;
			padding: 24rpx;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
			
			.item-header {
				margin-bottom: 16rpx;
				
				.publish-time {
					font-size: 24rpx;
					color: #999;
				}
			}
			
			.item-content {
				.item-title {
					font-size: 32rpx;
					color: #333;
					font-weight: bold;
					margin-bottom: 12rpx;
				}
				
				.item-desc {
					font-size: 28rpx;
					color: #666;
					line-height: 1.5;
					margin-bottom: 16rpx;
				}
				
				.item-location {
					display: flex;
					align-items: center;
					margin-bottom: 16rpx;
					
					.location-icon {
						font-size: 28rpx;
						color: #999;
						margin-right: 6rpx;
					}
					
					.location-text {
						font-size: 24rpx;
						color: #999;
					}
				}
			}
			
			.item-footer {
				display: flex;
				justify-content: flex-end;
				border-top: 1rpx solid #f5f5f5;
				padding-top: 16rpx;
				
				.contact-btn {
					display: flex;
					align-items: center;
					background-color: #e93323;
					color: #fff;
					padding: 10rpx 24rpx;
					border-radius: 30rpx;
					
					.contact-icon {
						font-size: 28rpx;
						margin-right: 6rpx;
					}
					
					.contact-text {
						font-size: 24rpx;
					}
				}
			}
		}
		
		.loading-more {
			text-align: center;
			padding: 20rpx 0;
			color: #999;
			font-size: 24rpx;
			
			.loading {
				display: inline-block;
				animation: loading 1s linear infinite;
				margin-right: 10rpx;
			}
		}
		
		.empty-container {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 100rpx 0;
			
			.empty-image {
				width: 240rpx;
				height: 240rpx;
				margin-bottom: 20rpx;
			}
			
			.empty-text {
				font-size: 28rpx;
				color: #999;
			}
		}
		
		.float-add-btn {
			position: fixed;
			right: 30rpx;
			bottom: 100rpx;
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
			z-index: 99;
			
			.add-icon {
				color: #fff;
				font-size: 60rpx;
				font-weight: bold;
				line-height: 1;
			}
		}
	}
	
	@keyframes loading {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}
</style>